<template>
    <transition name="move">
        <div class="add-content" v-show="visible">
            <i class="el-icon-close icon" @click="close"></i>
            <Crumb name="联系人"></Crumb>
            <div class="search">
                <el-button type="primary" size="small" class="input" @click="clear()
                                                                        dialogVisible=true">新增联系人
                </el-button>
            </div>
            <div class="content">
                <div class="table-wrapper">
                    <el-table
                            :data="contactList"
                            border
                            stripe
                            style="width: 100%">
                        <el-table-column
                                prop="supplierContact"
                                label="Name"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="email"
                                label="email"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="jobPosition"
                                label="job Position"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="sex"
                                label="sex"
                        >
                        </el-table-column>

                        <el-table-column
                                label="Operate">
                            <template slot-scope="scope">
                                <el-button icon="el-icon-edit" type="primary" @click="edit(scope.row)" size="small">
                                    编辑
                                </el-button>
                            </template>
                        </el-table-column>

                    </el-table>
                </div>
            </div>
            <el-dialog
                    modal-append-to-body
                    append-to-body
                    title="联系人"
                    :visible.sync="dialogVisible"
                    width="80%"
            >
                <el-form ref="form" :model="contact" label-width="150px" :rules="rule">
                    <el-form-item label="联系人" prop="supplierContact">
                        <el-input v-model="contact.supplierContact" placeholder="联系人" size="small"
                                  class="my-input"></el-input>
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-select v-model="contact.sex" placeholder="性别" size="small" class="my-input">
                            <el-option
                                    v-for="item in ['男','女']"
                                    :key="item"
                                    :label="item"
                                    :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="职位" prop="jobPosition">
                        <el-input v-model="contact.jobPosition" placeholder="职位" size="small"
                                  class="my-input"></el-input>
                    </el-form-item>
                    <el-form-item label="电子邮箱" prop="email">
                        <el-input v-model="contact.email" placeholder="Email" class="my-input" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话">
                        <el-button type="success" icon="el-icon-plus"
                                   @click="contact.phones.push({phone:''})">增加
                        </el-button>
                        <div v-for="item in contact.phones" :key="item">
                            <div>
                                <el-input v-model="item.phone" class="my-input" size="small"></el-input>
                            </div>
                        </div>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submitForm">确认</el-button>
              </span>
            </el-dialog>
        </div>
    </transition>
</template>

<script>
    import {vendorContactList,addVendorContact,modVendorContact} from "../../api/jianzhan";
    import {ERROR_OK} from "../../util/config";

    export default {
        name: "contact",
        props: {
            visible: Boolean,
            supplierId: Number
        },
        data() {
            return {
                dialogVisible: false,
                contactList: [],
                contact: {
                    supplierContact: '',
                    email: '',
                    jobPosition: '',
                    sex: '',
                    phones: [{phone: ''}]
                },
                rule: {
                    email:[{type:'email',message:'邮箱格式错误'},{required:true}],
                    supplierContact: [{required: true}],
                    jobPosition: [{required: true}]
                }

            }
        },
        methods: {
            submitForm() {
                this.$refs.form.validate(async valid => {
                    if (valid) {
                        let {id, supplierContact, sex, jobPosition, email, phones} = this.contact;
                        let phone = phones.map(item=>{
                            return item.phone
                        });
                            phone = phone.join(',');
                        if (!id) {
                            const {status} = await addVendorContact({
                                supplierId: this.supplierId,
                                supplierContact,
                                sex,
                                jobPosition,
                                email,
                                phones:phone
                            });
                            if (status === ERROR_OK) {
                                this.getContactList();
                                this.clear();
                                this.dialogVisible = false
                            }
                        } else {
                            const {status} = await modVendorContact({
                                supplierId: this.supplierId,
                                supplierContact,
                                sex,
                                id,
                                jobPosition,
                                email,
                                phones:phone
                            });
                            if (status === ERROR_OK) {
                                this.getContactList();
                                this.clear();
                                this.dialogVisible = false
                            }
                        }
                    }
                })
            },
            async getContactList() {
                const {status, data} = await vendorContactList(this.supplierId);
                if (status === ERROR_OK) {
                    this.contactList = data;
                } else {
                    this.contactList = []
                }
            },
            edit(contact) {
                contact.phones = contact.supplierContactPhoneList.map(item => {
                    return {phone: item.phone}
                });
                this.contact = {...contact};
                this.dialogVisible = true
            },
            close() {
                this.$emit('close')
            },
            clear() {
                this.contact = {
                    supplierContact: '',
                    email: '',
                    jobPosition: '',
                    sex: '',
                    phones: [{phone: ''}]
                }
            }
        },
        watch: {
            supplierId() {
                this.getContactList()
            }
        }
    }
</script>

<style scoped lang="scss">
    .add-content {
        position: fixed;
        padding: 20px;
        z-index: 2;
        top: 0;
        right: 10px;
        bottom: 0;
        left: 10px;
        background: #fff;
        .search {
            text-align: left;
            margin: 20px 0;
        }
        .icon {
            position: absolute;
            font-size: 30px;
            right: 30px;
            top: 10px;
            font-weight: 800;
            color: #409eff;
            transition: all 0.3s ease-in-out;
            cursor: pointer;
            &:hover {
                transform: rotate(90deg);
            }
        }
        &.move-enter-active, &.move-leave-active {
            transition: all 0.5s ease;
        }
        &.move-enter, &.move-leave-to {
            transform: translateX(100%);
        }
    }
</style>